<template>
	<view class="pages-bind-technician pd-md" :style="{background:pageColor}" v-if="isLoad">

		<view class="f-title text-bold" style="color: #142C57;margin:40rpx 0">您登录的账号已注册了{{$t('action.attendantName')}}身份
		</view>

		<view class="fill-base flex-center pd-lg radius-16">
			<image mode="aspectFill" class="cover radius" :src="coachAccountInfo.work_img"></image>
			<view class="flex-1 flex-between ml-md">
				<view class="f-mini-title text-bold max-500 ellipsis" style="color:#142C57">
					{{coachAccountInfo.coach_name}}
				</view>
				<i class="iconfont icon-right"></i>
			</view>
		</view>
		<view class="flex-center flex-column" style="margin-top: 40rpx;">
			<view @tap.stop="toBind" class="login-btn flex-center f-title radius-10" style="margin: 40rpx 0"
				:style="{ background: primaryColor ,borderColor:primaryColor ,color:'#fff'}">
				{{coachAccountInfo.account_info&&coachAccountInfo.account_info.id?'绑定并替换之前账号':'绑定账号'}}
			</view>
			<view @tap.stop="toNotBind" class="login-btn flex-center f-title radius-10"
				:style="{ borderColor:primaryColor ,color:primaryColor}">不绑定
			</view>
		</view>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {}
			}
		},
		async onLoad(options) {
			this.options = options
			if (!this.configInfo.id) {
				await this.getConfigInfo()
			}
			uni.setNavigationBarTitle({
				title: '绑定' + this.$t('action.attendantName')
			})
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			this.isLoad = true
			// #ifdef H5 
			this.$jweixin.hideOptionMenu()
			// #endif
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			coachAccountInfo: state => state.user.coachAccountInfo,
		}),
		methods: {
			...mapActions(['getConfigInfo', ]),
			...mapMutations(['updateUserItem']),
			async toBind() {
				let {
					id: coach_id
				} = this.coachAccountInfo
				let {
					id
				} = this.options
				await this.$api.base.bindCoachAccount({
					id,
					coach_id
				})
				this.$util.showToast({
					title: `绑定成功`
				})
				this.updateUserItem({
					key: 'isRegister',
					val: false
				})
				setTimeout(() => {
					this.$util.goUrl({
						url: `/pages/coach-index`,
						openType: `reLaunch`
					})
				}, 1000)
			},
			toNotBind() {
				this.updateUserItem({
					key: 'isRegister',
					val: false
				})
				this.$util.goUrl({
					url: `/technician/pages/login`,
					openType: `reLaunch`
				})
			}
		}
	}
</script>

<style lang="scss">
	.pages-bind-technician {
		.cover {
			width: 90rpx;
			height: 90rpx;
		}

		.icon-right {
			font-size: 20rpx;
			color: #8A98AF
		}

		.login-btn {
			width: 630rpx;
			height: 110rpx;
			color: #142C57;
			background: #fff;
			border: 1rpx solid #fff;
			transform: scaleZ(360deg);
		}
	}
</style>